<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        font: 15px/1.3'Open Sans', sans-serif;
        color: #5e5b64;
        text-align: center;
    }
    a,
    a:visited {
        outline: none;
        color: #389dc1;
    }
    a:hover {
        text-decoration: none;
    }
    section,
    footer,
    header,
    aside,
    nav {
        display: block;
    }
    /*-------------------------
	The menu
--------------------------*/
    nav {
        display: inline-block;
        margin: 60px auto 45px;
        background-color: #5597b4;
        box-shadow: 0 1px 1px #ccc;
        border-radius: 2px;
    }
    nav a {
        display: inline-block;
        padding: 18px 30px;
        color: #fff !important;
        font-weight: bold;
        font-size: 16px;
        text-decoration: none !important;
        line-height: 1;
        text-transform: uppercase;
        background-color: transparent;
        -webkit-transition: background-color 0.25s;
        -moz-transition: background-color 0.25s;
        transition: background-color 0.25s;
    }
    nav a:first-child {
        border-radius: 2px 0 0 2px;
    }
    nav a:last-child {
        border-radius: 0 2px 2px 0;
    }
    nav.home .home,
    nav.projects .projects,
    nav.services .services,
    nav.contact .contact {
        background-color: #e35885;
    }
    p {
        font-size: 22px;
        font-weight: bold;
        color: #7d9098;
    }
    p b {
        color: #ffffff;
        display: inline-block;
        padding: 5px 10px;
        background-color: #c4d7e0;
        border-radius: 2px;
        text-transform: uppercase;
        font-size: 18px;
    }
    .ng-cloak {
        display: none;
    }
</style>

<body>
    <!-- Adding the ng-app declaration to initialize AngularJS -->
    <div id="main" ng-app>
        <!-- The navigation menu will get the value of the "active" variable as a class.
		 The $event.preventDefault() stops the page from jumping when a link is clicked. -->

        <nav class="{{active}}" ng-click="$event.preventDefault()">

            <!-- When a link in the menu is clicked, we set the active variable -->

            <a href="#" class="home" ng-click="active='home'">Home</a>
            <a href="#" class="projects" ng-click="active='projects'">Projects</a>
            <a href="#" class="services" ng-click="active='services'">Services</a>
            <a href="#" class="contact" ng-click="active='contact'">Contact</a>
        </nav>

        <!-- ng-show will show an element if the value in the quotes is truthful,
		 while ng-hide does the opposite. Because the active variable is not set
		 initially, this will cause the first paragraph to be visible. -->

        <p ng-hide="active">Please click a menu item</p>
        <p ng-show="active" class="ng-cloak">You chose <b>{{active}}</b>
        </p>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</body>

</html>
